<template>
    <div class="layout_source_materials">
        <el-tabs v-model="activeId" class="tabs_box" :stretch="true" @tab-click="handleClick">
            <el-tab-pane v-for="(item, index) in storeres" :key="item.id" :label="item.name" :name="item.id">
                <template #label>
                    <el-tooltip :disabled="item.name?.length <= MaxNameLength" effect="dark" placement="top">
                        <template #content
                            ><div class="custom-tooltip-box">{{ item.name }}</div></template
                        >
                        <span class="custom-tabs-label">
                            <img style="width: 20px; height: 20px" :src="item.logo" alt="" />
                            <span>{{ getViewName(item.name) }}</span>
                        </span>
                    </el-tooltip>
                </template>
                <CommerceList
                    v-if="item.id == activeId"
                    ref="CommerceListRef"
                    :active="index"
                    :shop_id="item.id"
                    :shop_type="item.type"
                    :shop_item="item" />
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup lang="tsx">
import { ref, reactive, onMounted } from 'vue';
import { storeList } from '@/api/highMaterial/sourceMaterials';
import CommerceList from './components/CommerceList.vue';
const CommerceListRef = ref<any>(null);
const storeres = ref<any>([]);
const handleClick = (tab: any, event: Event) => {
    CommerceListRef.value[tab.index]?.reloadTable();
};

const activeId = ref(null);

const MaxNameLength = 15;
const getViewName = name => {
    if (name?.length > MaxNameLength) {
        return name.substring(0, MaxNameLength) + '...';
    }
    return name;
};

const storeListFun = () => {
    storeList({}).then((res: any) => {
        storeres.value = res;
        activeId.value = res[0]['id'];
    });
};

onMounted(() => {
    storeListFun();
});
</script>

<style lang="scss" scoped>
.layout_source_materials {
    padding: 24px;
    padding-top: 20px;
    border: 1px solid #eaeaea;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
}

.tabs_box {
    :deep(.el-tabs__header) {
        margin-bottom: 24px;
    }

    :deep(.el-tabs__item) {
        color: #969696;
    }

    :deep(.is-active) {
        font-weight: 600;
        color: #ff6b00;
    }

    :deep(.el-tabs__item) {
        height: 50px;
    }

    .custom-tabs-label {
        display: flex;
        align-items: center;

        img {
            margin-right: 5px;
        }
    }
}

.custom-tooltip-box {
    max-width: 300px;
    white-space: break-spaces;
    word-wrap: break-word;
}
</style>
